<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/webjars/bootstrap/3.3.7/css/bootstrap.css">
    <script src="/webjars/jquery/3.4.1/jquery.js" type="text/javascript"></script>
    <script src="/webjars/bootstrap/3.3.7/js/bootstrap.js" type="text/javascript"></script>
    <script src="/webjars/vue/2.6.10/dist/vue.js" type="text/javascript"></script>
    <script src="/webjars/axios/0.19.0/dist/axios.js" type="text/javascript"></script>

</head>
<body>
<div id="vuebox">
    <div class="container" style="margin-top: 50px">
        <h1 class="text-center">航班查询首页</h1>
        <p>
            <button type="button" @click="add">添加航班</button>
        </p>
                <form class="form-inline" role="form" style="padding-left: 250px;">
                    <div class="form-group" style="padding-left: 20px;">
                        <label>起飞城市:</label>
                        <select class="form-control" v-model="categoryid">
                            <option value="0">请选择起飞城市</option>
                            <option v-for="item in categoryList.data" :value="item.id">{{item.cityname}}</option>
                        </select>
                    </div>
                </form>
                <form class="form-inline" role="form" style="padding-left: 250px;float: left">
                    <div class="form-group" style="padding-left: 20px;">
                        <label>到达城市:</label>
                        <select class="form-control" v-model="daoda">
                            <option value="0">请选择到达城市</option>
                            <option v-for="item in categoryList.data" :value="item.id">{{item.cityname}}</option>
                        </select>
                    </div>
                </form>
                <div class="form-group"  style="padding-left: 20px;margin-left: 20px">
                    <button type="button" style="margin-left: 20px" class="btn btn-primary" @click="selectEntry(1)">查询</button>
                </div>

        <br/>
        <table class="table table-striped">
            <h1 v-if="entries.data!=null" class="text-center">帮您查询到以下数据</h1>
            <thead>
            <tr>
                <th>航班编号</th>
                <th>起飞城市</th>
                <th>起飞时间</th>
                <th>到达城市</th>
                <th>达到时间</th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="item in entries.data">
                <td>{{item.flightno}}</td>
                <td>
                    <p v-if="item.departurecity==1">北京</p>
                    <p v-if="item.departurecity==2">上海</p>
                    <p v-if="item.departurecity==3">广州</p>
                    <p v-if="item.departurecity==4">拉萨</p>
                    <p v-if="item.departurecity==5">乌鲁木齐</p>
                </td>
                <td>{{item.departuretime}}</td>

                <td>
                    <p v-if="item.arrivalcity==1">北京</p>
                    <p v-if="item.arrivalcity==2">上海</p>
                    <p v-if="item.arrivalcity==3">广州</p>
                    <p v-if="item.arrivalcity==4">拉萨</p>
                    <p v-if="item.arrivalcity==5">乌鲁木齐</p>
                </td>
                <td>{{item.arrivaltime}}</td>
            </tr>
            </tbody>
        </table>
        <br/>
            </div>

    <!--添加的模态框-->
    <!--模态框-->
    <div class="modal" id="mymodal">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button class="close" @click="hideModal()" type="button">&times;</button>
                    <div class="modal-title">
                        <p>添加航班</p>
                    </div>
                </div>
                <div class="modal-body">
                    <form class="form-horizontal" role="form">
                        <div class="form-group">
                            <label for="title" class="col-sm-2 control-label">航班编号</label>
                            <div class="col-sm-10">
                                <input v-model="new_entry.flightno" id="title" type="text" class="form-control">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="qifei" class="col-sm-2 control-label">起飞城市</label>
                            <div class="col-sm-10">
                                <select id="qifei" class="form-control" v-model="new_entry.departurecity">
                                    <option value="0">请选择起飞城市</option>
                                    <option v-for="item in categoryList.data" :value="item.id">{{item.cityname}}</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="categoryId" class="col-sm-2 control-label">起飞时间</label>
                            <div class="col-sm-10">
                                <input v-model="new_entry.departuretime" id="categoryId" type="text" class="form-control">
                            </div>
                        </div>


                        <div class="form-group">
                            <label for="daoda" class="col-sm-2 control-label">到达城市</label>
                            <div class="col-sm-10">
                                <select id="daoda" class="form-control" v-model="new_entry.arrivalcity">
                                    <option value="0">请选择到大城市</option>
                                    <option v-for="item in categoryList.data" :value="item.id">{{item.cityname}}</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="createdate" class="col-sm-2 control-label">到达时间</label>
                            <div class="col-sm-10">
                                <input v-model="new_entry.arrivaltime" id="createdate" type="text" class="form-control" placeholder="请输入上传时间">
                            </div>
                        </div>

                    </form>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-default" @click="hideModal()">关闭</button>
                    <button class="btn btn-primary" @click="saveBook">购买</button>
                </div>
            </div>
        </div>
    </div>


</div>
</body>
  <script type="text/javascript">
          var vm=new Vue({
              el:"#vuebox",
              data:{
                  categoryid:"0",
                  categoryList:"",
                  daoda:"0",
                  entries:{},
                  new_entry:{
                      flightno:"",departurecity:"0",departuretime:"",arrivalcity:"0",arrivaltime:""
                  },
                  addflight:""
              },
              methods:{
                  selectEntry:function () {
                      if(this.categoryid==0){
                          alert("请选择起飞城市")
                          return;
                      }
                      if(this.daoda==0){
                          alert("请选择到达城市")
                          return;
                      }
                      if(this.categoryid==this.daoda){
                          alert("起飞城市和到达城市不能相同!")
                          return;
                      }
                      axios.get("http://localhost:8081/seleFlight",{params:{qifei:this.categoryid,daoda:this.daoda}}).then(res=>{
                          this.entries=res.data;
                      })
                  },
                  add:function () {
                     $("#mymodal").modal('show')
                  },
                  hideModal:function () {
                      $("#mymodal").modal('hide')
                      this.daoda="0";
                      this.categoryid="0"
                  },
                  saveBook:function () {
                      axios.post("http://localhost:8081//addFlight",this.new_entry).then(res=>{
                          this.addflight=res.data;
                          if(this.addflight.result=="SUCCESS"){
                              alert("添加成功!")
                              this.hideModal();
                          }else{
                              alert("添加失败!")

                          }
                      })
                  }
              },
              mounted(){
                  axios.get("http://localhost:8081/seleCity").then(res=>{
                      this.categoryList=res.data;
                  })
              }
      })
  </script>
</html>